<!DOCTYPE html>
  <html>
  <head>
      <meta charset="utf-8">
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
      <title>登录</title>
      <link rel="stylesheet" type="text/css" href="__CSS__/api.css"/>
      <style>
          html,body{
            width:100%;
            height:100%;
          }
          body{
            background:rgba(0,0,0,0.4);

          }
          .box{
            width:380px;
            height:466px;
            background:#fff;
            border-radius:4px;
            position: absolute;
            top:0;
            left:0;
            bottom:0;
            right:0;
            margin:auto;
            padding:0 45px 0 35px;
            box-sizing: border-box;
          }
          .title{
            font-size:20px;
            font-weight:600;
            color:#101C37;
            margin-top:32px;
            margin-bottom:60px;
          }
          .arrow{
            width:16px;
            height:16px;
            position: absolute;
            top:24px;
            right:20px;
          }
          input{
            width:100%;
            height:50px;
            line-height: 50px;
            border:1px solid #DBDBDB;
            border-radius:2px;
            padding:0 16px;
            box-sizing: border-box;
            font-size:14px;
            color:#333;
            outline: none;
          }
          input::-webkit-input-placeholder{
            font-size:14px;
            color:#bbb;
          }
          .jianju{
            margin-bottom:20px;
          }
          .tipsBox{
            margin-top:14px;
            margin-bottom:80px;
            display: flex;
            justify-content: space-between;
          }
          .left-tips{
            font-size:14px;
            color:#3463E6;
              cursor: pointer;
          }
          .right-tips{
            font-size:14px;
            color:#333;
              cursor: pointer;
          }
          .btn{
            width:100%;
            height:50px;
            line-height: 50px;
            text-align: center;
            font-size:16px;
            color:#fff;
            font-family:PingFangSC-Medium;
            font-weight:500;
            background: #3463E6;
            border-radius:4px;
              cursor: pointer;
          }
      </style>
  </head>
  <body>
    <div class="box">
      <div class="title">登录</div>
      <img src="__IMG__/arrow.png" alt="" class="arrow">
      <input type="text" maxlength="11" id="phone2" placeholder="请输入账号" class="jianju">
      <input type="password" minlength="6" id="pwd" placeholder="请输入密码">
      <div class="tipsBox">
        <div class="left-tips" onclick="location.href='{:url('home/Login/select_role')}'">立即注册</div>
        <div class="left-tips" onclick="location.href='{:url('home/index/index')}'">随便看看</div>
        <div class="right-tips" onclick="location.href='{:url('home/Login/resetPwd')}'">忘记密码？</div>
      </div>
      <div class="btn">立即登录</div>
    </div>
    <div style="width:100%;margin:0 auto; padding:20px 0;background-color: #fff;position: absolute;bottom: 0;text-align: center">
        <a target="_blank" href=" " style="display:inline-block;text-decoration:none;height:20px;line-height:20px;"><img src="__IMG__/gongan.png" style="float:left;"/><p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">京公网安备 11010502042473号</p></a>
    </div>
  </body>
  <script src="/static/admin/js/jquery.min.js"></script>
  <script type="text/javascript" src="__JS__/api.js"></script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.10&key=3108d268226b46915b5faa028a004245&plugin=AMap.Geocoder"></script>
  <script type="text/javascript">
      $('.btn').on('click',function (e) {
          var _phone = $('#phone2'),
              _pwd = $('#pwd'),
              p = 0,
              w = 0;
          if(_phone.val().trim() == ""){
              alert('请输入手机号');
              return;
          }else{
              var pattern = /^1[3456789]\d{9}$/;
              if(!pattern.test(_phone.val().trim())){
                  alert('请输入正确的手机号');
                  return;
              }else{
                  p = 1;
              }
          }
          if(_pwd.val() == ""){
              alert('请输入密码');
              return;
          }else{
              if(_pwd.val().length < 6){
                  alert('密码不能低于6位');
                  return;
              }else{
                  w = 1;
              }

          }
          dingweierror();
          if(p && w){
              $.ajax({
                  url:"{:url('home/Login/doLogin')}",
                  type:'post',
                  data:{phone:_phone.val().trim(),password:_pwd.val()},
                  dataType:'json',
                  success:function(res){
                      if(res.code == 200){
                          window.location.href=res.url;
                      }else{
                          alert(res.msg);
                      }
                  }
              })
          }
      })
  </script>
  <script type="text/javascript">
      function dingweierror() {
          var city = '';
          var map = new AMap.Map('container', {
              resizeEnable: true
          });
          AMap.plugin('AMap.CitySearch', function () {
              var citySearch = new AMap.CitySearch()
              citySearch.getLocalCity(function (status, result) {
                  if (status === 'complete' && result.info === 'OK') {
                      // 查询成功，result即为当前所在城市信息
                      city = result.city;
                  }
                  gotoSureOrSession(city);
              })
          });
      }
      function gotoSureOrSession(city) {
          $.ajax({
              url: '/home/Base/location',
              data: 'city='+city,
              type: 'POST',
              dataType: 'JSON',
              success: function (returnData) {
                  return true;
              },
              error: function () {
                  alert('服务器错误，请刷新重试！');
              }
          })
      }

  </script>
  </html>
